<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例2</title>
    <link rel="stylesheet" href="./CSS/index.css">
    <link rel="stylesheet" href="./resurce/reset.css">
    <link rel="stylesheet" href="./CSS/base.css">
</head>

<body>
    <!-- 创建整体容器 -->
    <div class="up-wrapper w">
        <!-- 创建顶部导航条 -->
        <div class="up-top w2">
            <!-- 左边的 -->
            <div class="utop-left">
                <ul>
                    <li class="awsome-img">
                        <img src="./resurce/img/logo.png" alt="">
                    </li>
                    <li>AWSOME APP</li>
                </ul>
            </div>
            <!-- 右边的 -->
            <ul class="utop-right">
                <li>HOME</li>
                <li>FEATURES</li>
                <li>PRICING</li>
                <li class="download-detail">
                    <a href="#">DOWNLODA NOW</a>
                    <div class="download-1 set-a">
                        <a href="#">Download For Android</a>
                    </div>
                    <div class="download-2 set-a">
                        <a href="#">Download For Windows</a>
                    </div>
                    <div class="download-3 set-a">
                        <a href="#">Download For ios</a>
                    </div>
                    <div class="download-4 set-a">
                        <a href="#">Download For Linux</a>
                    </div>
                </li>
            </ul>
        </div>

        <!-- 创建上半部分中间的容器 -->
        <div class="up-middle w2">
            <!-- 创建上半部分中间的左侧 -->
            <ul class="umid-left">
                <li class="text-first">
                    Awsome App <br>
                    App Landing Template
                </li>
                <li class="text-second">
                    An awesome landing page template to showcase your app features, screenshots,<br>
                    pricing, user testimonials and download links.
                </li>
                <li class="text-second">
                    <i>
                        <img src="./resurce/img/tick.png" alt="">
                    </i>
                    Amazing Desigh to Present Your App
                </li>
                <li class="text-second">
                    <i>
                        <img src="./resurce/img/tick.png" alt="">
                    </i>
                    Fully Responsive and Powered by Bootstrap & PaperKit
                </li>
                <li class="text-second">
                    <i>
                        <img src="./resurce/img/tick.png" alt="">
                    </i>
                    Very Easy to Customize and Setup
                </li>
                <li class="button">
                    START EXPLORING
                </li>
            </ul>
            <!-- 创建上半部分中间的右侧 -->
            <div class="umid-right">
                <img src="./resurce/img/1.jpg" alt="">
            </div>
        </div>

        <!-- 创建中上部分的六个功能介绍 -->
        <div class="explan w2">
            <!-- 创建中间的六个介绍 -->
            <ul class="ep">
                <li class="test">
                    <i><img src="./resurce/img/24gf-tags.png" alt=""></i>
                    <span class="black-20">Showcase Your App</span>
                    <span class="content">Showcase your app in style with this professional looking template.</span>
                </li>
                <li>
                    <i><img src="./resurce/img/设置_填充.png" alt=""></i>
                    <span class="black-20">Easy to Customize</span>
                    <span class="content">Easily customize the text and replace the images to suit your own app.</span>
                </li>
                <li>
                    <i><img src="./resurce/img/画笔.png" alt=""></i>
                    <span class="black-20">Unlimited Colors</span>
                    <span class="content">Easily change the colors in csS that can go well with your branding.</span>
                </li>
                <li>
                    <i><img src="./resurce/img/电脑_jurassic.png" alt=""></i>
                    <span class="black-20">Responsive,HTML5,CSS3</span>
                    <span class="content">Our template is 100% responsive and built with modern standards.</span>
                </li>
                <li>
                    <i><img src="./resurce/img/文档.png" alt=""></i>
                    <span class="black-20">Designed to Convert</span>
                    <span class="content">Designed to engage your user and increase your conversion.</span>
                </li>
                <li>
                    <i><img src="./resurce/img/游泳圈.png" alt=""></i>
                    <span class="black-20">With no Boundaries</span>
                    <span class="content">Use Bootstrap and PaperKit to add additional components.</span>
                </li>
            </ul>
        </div>

        <!-- 创建中下部分的产品介绍 -->
        <div class="introduce-wrapper w2">
            <!-- 创建左侧图片 -->
            <div class="intro-img">
                <img src="./resurce/img/2.jpg" alt="">
            </div>
            <!-- 创建右侧文字 -->
            <ul class="intro-text">
                <li class="head">What is Awesome App?</li>
                <li class="first-para">Add a brief story about your app here, what purpose your app solves and why you
                    think your user would
                    want to have it on their device.</li>
                <li>Re-establish the main use case of your app by listing them below.Make sure to place a
                    relavent screenshot on the left.</li>
                <li class="text-list">
                    <i>
                        <img src="./resurce/img/tick2.png" alt="">
                    </i>
                    Amazing Design to Present Your App
                </li>
                <li class="text-list">
                    <i>
                        <img src="./resurce/img/tick2.png" alt="">
                    </i>
                    Fully Responsive and Powered by Bootstrap & PaperKit
                </li>
                <li class="text-list">
                    <i>
                        <img src="./resurce/img/tick2.png" alt="">
                    </i>
                    Very Easy to Customize and Setup
                </li>
            </ul>
        </div>

        <!-- 创建底部介绍栏 -->
        <div class="bottom-wrapper w">
            <!-- 创建中间内容 -->
            <div class="middle-content w2">
                <!-- 创建文字 -->
                <span class="text-head">Take a look at our screenshots</span>
                <br>
                <span class="text-sec">Aod your app screenshats below. Make sure to make therm lively by putting them
                    inside real device mockups</span>
                <br>
                <span class="text-third">Replace this text o describe the eoreensholn of your app.</span>
                <!-- 创建图片容器 -->
                <div class="picture">
                    <img src="./resurce/img/5.jpg" alt="">
                </div>
            </div>
        </div>

    </div>
</body>

</html>